JavaScriptin iteraattoriavustajat ja rinnakkaisajo: syväsukellus samanaikaiseen tietovirtojen käsittelyyn

Jatkuvasti kehittyvässä web-kehityksen maailmassa suorituskyky ei ole vain ominaisuus, vaan perustavanlaatuinen vaatimus. Sovellusten käsitellessä yhä massiivisempia tietomääriä ja monimutkaisempia operaatioita, JavaScriptin perinteinen, peräkkäinen luonne voi muodostua merkittäväksi pullonkaulaksi. Tuhansien tietueiden noutamisesta API:sta suurten tiedostojen käsittelyyn, kyky suorittaa tehtäviä samanaikaisesti on ensiarvoisen tärkeää.

Tässä astuu kuvaan iteraattoriavustajia koskeva ehdotus, TC39:n Stage 3 -vaiheessa oleva esitys, joka on valmis mullistamaan tavan, jolla kehittäjät työskentelevät iteroitavan datan kanssa JavaScriptissä. Vaikka sen ensisijainen tavoite on tarjota monipuolinen, ketjutettava API iteraattoreille (samankaltainen kuin `Array.prototype` tarjoaa taulukoille), sen synergia asynkronisten operaatioiden kanssa avaa uuden ulottuvuuden: elegantin, tehokkaan ja natiivin samanaikaisen tietovirtojen käsittelyn.

Tämä artikkeli opastaa sinut rinnakkaisajon paradigmaan asynkronisten iteraattoriavustajien avulla. Tutkimme 'miksi', 'miten' ja 'mitä seuraavaksi', antaen sinulle tiedot nopeampien ja kestävämpien datankäsittelyputkien rakentamiseen modernissa JavaScriptissä.

Pullonkaula: Iteraation peräkkäinen luonne

Ennen kuin sukellamme ratkaisuun, määritellään ongelma selkeästi. Kuvitellaan yleinen skenaario: sinulla on lista käyttäjätunnuksia, ja jokaiselle tunnukselle sinun täytyy noutaa yksityiskohtaiset käyttäjätiedot API:sta.

Perinteinen lähestymistapa, jossa käytetään `for...of`-silmukkaa `async/await`-rakenteen kanssa, näyttää siistiltä ja luettavalta, mutta siinä on piilevä suorituskykyongelma.

            
async function fetchUserDetailsSequentially(userIds) {
  const userDetails = [];
  console.time("Sequential Fetch");

  for (const id of userIds) {
    // Jokainen 'await' keskeyttää koko silmukan, kunnes lupaus ratkeaa.
    const response = await fetch(`https://api.example.com/users/${id}`);
    const user = await response.json();
    userDetails.push(user);
    console.log(`Fetched user ${id}`);
  }

  console.timeEnd("Sequential Fetch");
  return userDetails;
}

const ids = [1, 2, 3, 4, 5];
// Jos jokainen API-kutsu kestää 1 sekunnin, koko funktio kestää noin 5 sekuntia.
fetchUserDetailsSequentially(ids);

            

              
                Copy
              
            
          

Tässä koodissa jokainen `await` silmukan sisällä estää suorituksen jatkumisen, kunnes kyseinen verkkopyyntö on valmis. Jos sinulla on 100 tunnusta ja jokainen pyyntö kestää 500 ms, kokonaisaika on huikeat 50 sekuntia! Tämä on erittäin tehotonta, koska operaatiot eivät ole riippuvaisia toisistaan; käyttäjän 2 noutaminen ei vaadi, että käyttäjän 1 tiedot ovat ensin saatavilla.

Klassinen ratkaisu: `Promise.all`

Vakiintunut ratkaisu tähän ongelmaan on `Promise.all`. Sen avulla voimme käynnistää kaikki asynkroniset operaatiot kerralla ja odottaa, että ne kaikki valmistuvat.

            
async function fetchUserDetailsWithPromiseAll(userIds) {
  console.time("Promise.all Fetch");

  const promises = userIds.map(id => 
    fetch(`https://api.example.com/users/${id}`).then(res => res.json())
  );

  // Kaikki pyynnöt lähetetään samanaikaisesti.
  const userDetails = await Promise.all(promises);

  console.timeEnd("Promise.all Fetch");
  return userDetails;
}

// Jos jokainen API-kutsu kestää 1 sekunnin, tämä kestää nyt vain noin 1 sekunnin (pisimmän pyynnön keston verran).
fetchUserDetailsWithPromiseAll(ids);

            

              
                Copy
              
            
          

`Promise.all` on valtava parannus. Sillä on kuitenkin omat rajoituksensa:

• Muistin kulutus: Se vaatii kaikkien lupausten taulukon luomisen etukäteen ja pitää kaikki tulokset muistissa ennen palauttamista. Tämä on ongelmallista erittäin suurille tai äärettömille tietovirroille.
• Ei vastapaineen hallintaa: Se lähettää kaikki pyynnöt samanaikaisesti. Jos sinulla on 10 000 tunnusta, saatat ylikuormittaa oman järjestelmäsi, palvelimen käyttörajoitukset tai verkkoyhteyden. Ei ole sisäänrakennettua tapaa rajoittaa samanaikaisuutta esimerkiksi 10 pyyntöön kerrallaan.
• Kaikki tai ei mitään -virheenkäsittely: Jos yksikin lupaus taulukossa hylätään, `Promise.all` hylätään välittömästi, ja kaikkien muiden onnistuneiden lupausten tulokset menetetään.

Tässä asynkronisten iteraattorien ja ehdotettujen avustajien voima todella pääsee oikeuksiinsa. Ne mahdollistavat virtapohjaisen käsittelyn ja tarkan samanaikaisuuden hallinnan.

Asynkronisten iteraattorien ymmärtäminen

Ennen kuin voimme juosta, meidän on opittava kävelemään. Kerrataan lyhyesti asynkroniset iteraattorit. Kun tavallisen iteraattorin `.next()`-metodi palauttaa objektin, kuten `{ value: 'some_value', done: false }`, asynkronisen iteraattorin `.next()`-metodi palauttaa Promise-olion, joka ratkeaa kyseiseen objektiin.

Tämä mahdollistaa ajan myötä saapuvan datan iteroinnin, kuten tiedostovirran palasten, sivutettujen API-tulosten tai WebSocket-tapahtumien käsittelyn.

Käytämme `for await...of`-silmukkaa asynkronisten iteraattorien kuluttamiseen:

            
// Generaattorifunktio, joka tuottaa arvon joka sekunti.
async function* createSlowStream() {
  for (let i = 1; i <= 5; i++) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    yield i;
  }
}

async function consumeStream() {
  const stream = createSlowStream();
  // Silmukka pysähtyy jokaisen 'await'-kohdalla odottamaan seuraavan arvon tuottamista.
  for await (const value of stream) {
    console.log(`Received: ${value}`); // Tulostaa 1, 2, 3, 4, 5, yhden sekunnissa
  }
}

consumeStream();

            

              
                Copy
              
            
          

Mullistus: Iteraattoriavustajaehdotus

TC39:n iteraattoriavustajaehdotus lisää tuttuja metodeja, kuten `.map()`, `.filter()` ja `.take()`, suoraan kaikkiin iteraattoreihin (sekä synkronisiin että asynkronisiin) `Iterator.prototype`- ja `AsyncIterator.prototype`-prototyyppien kautta. Tämä antaa meille mahdollisuuden luoda tehokkaita, deklaratiivisia datankäsittelyputkia muuntamatta iteraattoria ensin taulukoksi.

Kuvitellaan asynkroninen virta anturilukemia. Asynkronisten iteraattoriavustajien avulla voimme käsitellä sen näin:

            
async function processSensorData() {
  const sensorStream = getAsyncSensorReadings(); // Palauttaa asynkronisen iteraattorin

  // Hypoteettinen tulevaisuuden syntaksi natiiveilla asynkronisilla iteraattoriavustajilla
  const processedStream = sensorStream
    .filter(reading => reading.temperature > 30) // Suodata korkeat lämpötilat
    .map(reading => ({ ...reading, temperature: toFahrenheit(reading.temperature) })) // Muunna Fahrenheiteiksi
    .take(10); // Ota vain 10 ensimmäistä kriittistä lukemaa

  for await (const criticalReading of processedStream) {
    await sendAlert(criticalReading);
  }
}

            

              
                Copy
              
            
          

Tämä on eleganttia, muistitehokasta (se käsittelee yhden kohteen kerrallaan) ja erittäin luettavaa. Kuitenkin standardi `.map()`-avustaja, jopa asynkronisille iteraattoreille, on edelleen peräkkäinen. Jokaisen kartoitusoperaation on valmistuttava ennen seuraavan alkamista.

Puuttuva palanen: Samanaikainen kartoitus

Todellinen teho suorituskyvyn optimoinnissa tulee samanaikaisen kartoituksen ideasta. Mitä jos `.map()`-operaatio voisi aloittaa seuraavan kohteen käsittelyn, kun edellistä vielä odotetaan? Tämä on rinnakkaisajon ydin iteraattoriavustajien kanssa.

Vaikka `mapConcurrent`-avustaja ei virallisesti ole osa nykyistä ehdotusta, asynkronisten iteraattorien tarjoamat rakennuspalikat mahdollistavat tämän mallin toteuttamisen itse. Sen rakentamisen ymmärtäminen antaa syvällisen käsityksen modernista JavaScriptin samanaikaisuudesta.

Samanaikaisen `map`-avustajan rakentaminen

Suunnitellaan oma `asyncMapConcurrent`-avustajamme. Se on asynkroninen generaattorifunktio, joka ottaa vastaan asynkronisen iteraattorin, kartoitusfunktion ja samanaikaisuusrajan.

Tavoitteemme ovat:

1. Käsitellä useita kohteita lähde-iteraattorista rinnakkain.
2. Rajoittaa samanaikaisten operaatioiden määrää määritetylle tasolle (esim. 10 kerrallaan).
3. Tuottaa tulokset alkuperäisessä järjestyksessä, jossa ne esiintyivät lähdevirrassa.
4. Käsitellä vastapainetta luonnollisesti: älä vedä kohteita lähteestä nopeammin kuin niitä voidaan käsitellä ja kuluttaa.

Toteutusstrategia

Hallinnoimme aktiivisten tehtävien joukkoa. Kun tehtävä valmistuu, aloitamme uuden, varmistaen, että aktiivisten tehtävien määrä ei koskaan ylitä samanaikaisuusrajaamme. Tallennamme odottavat lupaukset taulukkoon ja käytämme `Promise.race()`-metodia tietääksemme, milloin seuraava tehtävä on valmis, mikä antaa meille mahdollisuuden tuottaa sen tulos ja korvata se.

            
/**
 * Käsittelee kohteita asynkronisesta iteraattorista rinnakkain samanaikaisuusrajan kanssa.
 * @param {AsyncIterable} source Lähde-asynkroninen iteraattori.
 * @param {(item: T) => Promise} mapper Asynkroninen funktio, jota sovelletaan jokaiseen kohteeseen.
 * @param {number} concurrency Rinnakkaisten operaatioiden enimmäismäärä.
 * @returns {AsyncGenerator}
 */
async function* asyncMapConcurrent(source, mapper, concurrency) {
  const executing = []; // Tällä hetkellä suoritettavien lupausten joukko
  const iterator = source[Symbol.asyncIterator]();

  async function processNext() {
    const { value, done } = await iterator.next();
    if (done) {
      return; // Ei enempää käsiteltäviä kohteita
    }
    
    // Aloita kartoitusoperaatio ja lisää lupaus joukkoon
    const promise = Promise.resolve(mapper(value)).then(mappedValue => ({ 
        result: mappedValue,
        sourceValue: value
    }));

    executing.push(promise);
  }

  // Täytä joukko alkutehtävillä rinnakkaisuusrajaan asti
  for (let i = 0; i < concurrency; i++) {
    processNext();
  }

  while (executing.length > 0) {
    // Odota, että jokin suoritettavista lupauksista ratkeaa
    const finishedPromise = await Promise.race(executing);

    // Etsi indeksi ja poista valmis lupaus joukosta
    const index = executing.indexOf(finishedPromise);
    executing.splice(index, 1);

    const { result } = await finishedPromise;
    yield result;

    // Koska paikka vapautui, aloita uusi tehtävä, jos kohteita on jäljellä
    processNext();
  }
}

            

              
                Copy
              
            
          

            
// Apufunktio API-kutsun simulointiin satunnaisella viiveellä
function fetchUser(id) {
  const delay = Math.random() * 1000 + 500; // 500ms - 1500ms viive
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`Resolved fetch for user ${id}`);
      resolve({ id, name: `User ${id}`, fetchedAt: Date.now() });
    }, delay);
  });
}

// Asynkroninen generaattori ID-virran luomiseksi
async function* createIdStream() {
  for (let i = 1; i <= 20; i++) {
    yield i;
  }
}

async function main() {
  const idStream = createIdStream();
  const concurrency = 5; // Käsittele 5 pyyntöä kerrallaan

  console.time("Concurrent Stream Processing");

  const userStream = asyncMapConcurrent(idStream, fetchUser, concurrency);

  // Kuluta tuloksena oleva virta
  for await (const user of userStream) {
    console.log(`Processed and received:`, user);
  }

  console.timeEnd("Concurrent Stream Processing");
}

main();

            

              
                Copy